<!DOCTYPE html>
<script src="../../resources/check-layout.js"></script>
<p>Test that a float that needs to be pushed to next column both because it's unbreakable and its
    first line doesn't fit in the previous column, ends up at the exact top of the next column.</p>
<p>There should be a blue rectangle below.</p>
<div id="test" style="position:relative; -webkit-columns:3; -webkit-column-gap:0; column-fill:auto; width:150px; height:90px; line-height:20px;">
    <div style="height:40px; background:blue;"></div>
    <br><br>
    <div data-offset-y="0" style="float:left; width:100%; -webkit-column-break-inside:avoid; background:blue;">
        <br><br>
    </div>
</div>
<script>
    checkLayout("#test");
</script>
